<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>dom事件</title>
</head>

<body>
  <div id="father">
    <div id="son" onclick="stopclick(event)">
      点击查看事件捕获和冒泡顺序
    </div>
  </div>
  <button id="stop" onclick="stopclick()">点击阻止冒泡</button>
</body>
<style>
  #father {
    border: 1px solid black;
    height: 100px;
    width: 100px;
    padding: 20px;
  }

  #son {
    height: 100%;
    width: 100%;
    border: 1px solid black;
  }
</style>
<script>
  //捕获
  window.addEventListener("click", function () {
    console.log("捕获 window")
  }, true)
  document.addEventListener("click", function () {
    console.log("捕获 document")
  }, true)
  document.documentElement.addEventListener("click", function () {
    console.log("捕获 html")
  }, true)
  document.body.addEventListener("click", function () {
    console.log("捕获 body")
  }, true)
  document.getElementById("father").addEventListener("click", function () {
    console.log("捕获 father")
  }, true)
  document.getElementById("son").addEventListener("click", function () {
    console.log("捕获 son")
  }, true)
  //冒泡
  window.addEventListener("click", function () {
    console.log("冒泡 window")
  }, false)
  document.addEventListener("click", function () {
    console.log("冒泡 document")
  }, false)
  document.documentElement.addEventListener("click", function () {
    console.log("冒泡 html")
  }, false)
  document.body.addEventListener("click", function () {
    console.log("冒泡 body")
  }, false)
  document.getElementById("father").addEventListener("click", function () {
    console.log("冒泡 father")
  }, false)
  document.getElementById("son").addEventListener("click", function () {
    console.log("冒泡 son")
  }, false);

  stopclick = function () {
    document.getElementById("son").addEventListener("click", function (event) {
      event = event || window.event;
      if (event && event.stopPropagation()) {
        event.stopPropagation();
      }
      else {
        event.canceBubble = true;
      }
    }, true)
  }
</script>

</html>